<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>1.4-1伸缩菜单1--高度</title>
</head>
<body>
  <div class="wrap">
  <p>菜单li浮动后，li脱离文档流，导致ul将失去高度和宽度；如果需要对ul进行整体背景设置，首先要给ul定义宽、高。</p>
  	<ul>
 	  <li><a class="on" href="#">首    页</a></li>
 	  <li><a href="#">新闻快讯</a></li>
 	  <li><a href="#">产品展示</a></li>
 	  <li><a href="#">售后服务</a></li>
 	  <li><a href="#">联系我们</a></li>
  	</ul>
  </div>
  <style type="text/css">
	*{
	  margin: 0;
	  padding: 0;
	  font-size: 14px;
	}
	ul{
	  list-style: none;
	  height: 50px;
	  border-bottom: 5px solid #f60;
	  padding-left: 30px;
	  overflow: hidden;
	}
	li{
	  float: left;
	  margin-top:20px;
	}
	a{
	  display: block;
	  text-decoration: none;
	  width: 100px;
	  height: 30px;
	  line-height: 30px;
	  text-align: center;
	  background: #ccc;
	}
	.on,
	a:hover{
	  margin-top: -10px;
	  height: 40px;
	  line-height: 40px;
	  background: #f60;
	  color: #ccc;
	}
  </style>
</body>
</html>